<template>
  <div class="">
    <h2 class="text-xl font-bold mb-4">控制栏</h2>
    <div class="space-y-4 text-[14px]">
      <div
        v-for="(option, index) in options"
        :key="index"
        class="flex justify-between items-center"
      >
        <span class="text-gray-700">{{ option.label }}</span>
        <div class="relative">
          <button
            class="bg-gray-0 text-gray-700 py-1 px-4 rounded-md inline-flex items-center"
            @click="toggleOption(option)"
            v-on-click-outside="hideOption"
          >
            {{ getSelectedLabel(option) }}
            <span
              class="iconfont icon-down_icon transition-transform duration-300 text-[12px] ml-[12px]"
              :class="option.isOpen ? 'transform rotate-180' : ''"
            ></span>
          </button>
          <div
            v-if="option.isOpen"
            class="absolute right-0 mt-2 py-2 w-40 bg-white rounded-md shadow-xl z-20"
          >
            <a
              v-for="(choice, choiceIndex) in option.choices"
              :key="choiceIndex"
              href="#"
              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
              @click.prevent="selectOption(index, choice.value)"
            >
              {{ choice.label }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { vOnClickOutside } from "@vueuse/components";
import SettingApi from "../api/setting";
import { useUserInfoStore } from "../store";

const options = ref([
  {
    label: "侧边栏",
    selected: "always",
    key: "theSidebar",
    isOpen: false,
    choices: [
      {
        label: "一直显示",
        value: "always",
      },
      {
        label: "自动隐藏",
        value: "auto",
      },
      {
        label: "一直隐藏",
        value: "never",
      },
    ],
  },
  // {
  //   label: "侧边栏位置",
  //   selected: "右侧",
  //   isOpen: false,
  //   choices: ["左侧", "右侧"],
  // },
  // {
  //   label: "底部栏",
  //   selected: "一直显示",
  //   isOpen: false,
  //   choices: ["自动隐藏", "一直显示", "一直隐藏"],
  // },
]);

const toggleOption = (option) => {
  option.isOpen = !option.isOpen;
};
const hideOption = () => {
  options.value.forEach((option) => {
    option.isOpen = false;
  });
};
const userInfoStore = useUserInfoStore();

// watch(
//   () => userInfoStore.userInfo,
//   () => {}
// );

function saveSetting(obj) {
  SettingApi.edit(obj);
}
// todo 可能要json序列化
function getSetting() {
  SettingApi.get().then((res) => {
    if (res) {
      options.value.forEach((option) => {
        option.selected = res[option.key] || option.selected;
      });
    }
  });
}
getSetting();

function getSelectedLabel(option) {
  return computed(() => {
    const item = option.choices.find(
      (choice) => choice.value === option.selected
    );
    if (item) {
      return item.label;
    }
    return "";
  });
}

const emits = defineEmits(["updateBasic"]);
const selectOption = (index, choice) => {
  options.value[index].selected = choice;
  options.value[index].isOpen = false;
  emits("updateBasic", {
    [options.value[index].key]: choice,
  });
};
</script>
